import React from "react";
import classNames from "classnames";
import { prefixCls } from "../constant";

interface PageArrowProps {
  onClick: () => void;
  disabled: boolean;
  direction: "prev" | "next";
}

const PageArrow: React.VFC<PageArrowProps> = (props) => {
  const { direction, disabled, onClick } = props;
  const componentClass = `${prefixCls}-arrow`;
  const classname = classNames(`${prefixCls}-item`, componentClass);
  const buttonClassName = classNames(
    disabled && `${componentClass}-disabled`,
    `${componentClass}-${direction}`
  );

  const directionTitle = { prev: "上一页", next: "下一页" };

  return (
    <li className={classname}>
      <button
        title={directionTitle[direction]}
        disabled={disabled}
        className={buttonClassName}
        onClick={onClick}
      />
    </li>
  );
};

export default PageArrow;
